<template>
  <div class="circle" :class="type">
    <i :class="_icon"></i>
    <h3 v-text="label"></h3>
  </div>
</template>

<script>
export default {
  name: 'CircleCard',
  data() {
    return {
    }
  },
  props: {
    type: {
      type: String,
      default: 'media'
    },
    icon: {
      type: String,
      default: () => 'add'
    },
    label: {
      type: String
    }
  },
  methods: {
  },
  computed: {
    _icon() {
      return `icon-${this.icon}`
    },
    _divStyle() {
      return {
        width: this.radius + 'px',
        height: this.radius + 'px'
      }
    },
    _iconStyle() {
      return {
        fontSize: (this.radius / 3) + 'px'
      }
    },
    _h3Style() {
      return {
        fontSize: (this.radius * 0.128 | 0) + 'px'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'

.circle
  position: relative
  color: #FFF
  width: 140px
  height: @width
  border-radius: @width
  display: inline-block
  border: 4px solid $color-theme
  background-color: rgba($color-theme, 0.5)
  box-sizing: border-box
  i
    position: absolute
    top: 40%
    left: 50%
    font-size: 50px
    transform: translate(-50%, -50%)
  i:before
    color: #FFF
    text-align: center
  h3
    top: 65%
    text-align: center
    position: relative
    font-weight: bold
    font-size: 18px
  &.medium
    width: 140px
    height: @width
    border-radius: @width
    i
      font-size: 50px
    h3
      font-size: 18px
  &.small
    width: 100px
    height: @width
    border-radius: @width
    i
      font-size: 25px
    h3
      font-size: 9px
</style>
